<template>
  <view class="home">
    <!-- #ifdef MP -->
    <search-slot>
      <template #left>
        <view class="search-left">
          <view class="iconfont icon-xiaoxi">

          </view>
        </view>
      </template>
      <template #center>
        <view class="flex-1 bg-light search-input" @click="goSearch">
          请输入搜索内容
        </view>
      </template>
      <template #right>
        <view class="search-right" @click="getScanCode">
          <view class="iconfont icon-saoma">

          </view>
        </view>
      </template>
    </search-slot>
    <!-- #endif -->
    <view class="address-wrapper" style="width:750rpx;height: 80rpx;line-height: 80rpx;">
      {{ address }}
    </view>
    <scroll-view scroll-x="true" :scroll-into-view="scrollInto" scroll-with-animation :scroll-left="scrollLeft">
      <view class="d-flex navbar-wrapper">
        <view v-for="(item, i) in navbars" :key="i" :id="'tab' + i" :class="currentIndex == i ? 'active' : ''"
          class="flex-shrink mx-2 navbars-item" @click="changeIndex(i)">{{ item.name }}</view>
      </view>
    </scroll-view>
    <swiper :style="'height:' + scrollH + 'px'" :current="currentIndex" @change="changeTab">
      <swiper-item v-for="(newItem, index) in newItems" :key="index">
        <view class="swiper-item">
          <scroll-view scroll-y="true" :style="'height:' + scrollH + 'px'" @scrolltolower="scrollToLower(index)">
            <template v-if="newItem.list.length > 0">
              <block v-for="(item, n) in newItem.list" :key="n">
                <!-- 轮播图 -->
                <template v-if="item.type == 'swiper'">
                  <swiper-banner :swipers="item.data"></swiper-banner>
                </template>
                <!-- 金刚区 -->
                <template v-else-if="item.type == 'indexnavs'">
                  <fast-nav :getPages="getPages"></fast-nav>
                </template>
                <!-- 瓷片区 -->
                <template v-else-if="item.type == 'threeAdv'">
                  <three-adv :item="item.data"></three-adv>
                </template>
                <!-- 一图广告 -->
                <template v-else-if="item.type == 'oneAdv'">
                  <one-adv :title="item.data.title" :cover="item.data.cover">
                  </one-adv>
                </template>
                <!-- 列表流 -->
                <template v-else-if="item.type == 'list'">
                  <common-list :news="item.data"></common-list>
                </template>
              </block>
              <view class="py-3 text-center">{{ newItem.loadmore }}</view>
            </template>
            <template v-else-if="newItem.forward == 'before'">
              <view class="py-3 text-center">
                <image src="../../static/loading.gif" mode="" style="width:120rpx;height:120rpx"></image>
              </view>
            </template>
            <template v-else>
              <view class="py-3 text-center">暂无数据...</view>
            </template>
          </scroll-view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 	<view class="" ref="qwe" id="qwe">
			我是在学习 --qqq
		</view> -->
  </view>
  <!-- 	view=div   image= img   text=span -->
</template>

<script>
var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
import {
  getHome,
  getPage
} from '../../api/index.js'
export default {
  data () {
    return {
      address: '获取定位中…',
      qqmapsdk: '',
      scrollH: 0,
      scrollLeft: '',
      num: 0,
      itemWidth: 0,
      scrollInto: '',
      currentIndex: 0,
      navbars: [],
      newItems: []
    }
  },
  onLoad () {
    this.qqmapsdk = new QQMapWX({
      key: 'NJNBZ-XS33X-WOM4O-ZLIG5-POXA3-ILFJC'
    });
    uni.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: (res2) => {
            this.address = res2.result.address
          },
          fail: (error) => {
            console.log('error', error);
          }
        })
      }
    });

  },
  onNavigationBarButtonTap (e) {
    console.log('eee', e);
  },
  onNavigationBarSearchInputClicked (e) {
    console.log('112233', e);
    uni.navigateTo({
      url: '/pages/search/search'
    })

  },
  mounted () {
    this.gethome()
    uni.getSystemInfo({
      success: (res) => {
        this.scrollH = res.windowHeight - uni.upx2px(256);
      }
    });

    // setTimeout(()=>{
    //  // console.log('222222222', uni.createSelectorQuery().in(this).select("#qwe"));
    //  // console.log('11111',uni.getElementById('qwe'));

    // },2000)
    setTimeout(() => {
      let dom = uni.createSelectorQuery().in(this).select(".navbars-item");
      dom.boundingClientRect((data) => {
        this.num = this.navbars.length;
        this.itemWidth = data.width + 40
      }).exec();
    }, 1000)
  },
  computed: {
    getPages () {
      let pagge = []
      if (this.newItems[this.currentIndex]) {
        this.newItems[this.currentIndex].list.forEach(item => {
          if (item.type == 'indexnavs') {
            // item.data  Object.values()   Object.keys()   forin
            let indexnav = Object.values(item.data)
            console.log('itemnav', indexnav);
            // [0,1,2,3,4,5,6,7,8,9] = [[0,1,2,3,4,5,6,7],[8,9]]
            //                               0               1
            //  Math.floor(0/8)  = 0
            //  Math.floor(1/8)  = 0
            //  ……
            //  Math.floor(7/8)  = 0


            //  Math.floor(8/8)  = 1
            //  Math.floor(9/8)  = 1
            indexnav.forEach((v, index) => {
              let page = Math.floor(index / 8)
              if (!pagge[page]) {
                pagge[page] = []
              }
              pagge[page].push(v)
            })

          }
        })
      }
      return pagge
    }
  },
  methods: {
    gethome () {
      getHome().then(res => {
        console.log('res=>', res);
        this.navbars = res.data.category
        for (var i = 0; i < this.navbars.length; i++) {
          let forward = i == 0 ? 'after' : 'before'
          let obj = {
            list: [],
            loadmore: '加载更多…',
            forward: forward
          }
          if (i == 0) {
            obj.list = res.data.data
          }
          this.newItems.push(obj)
          console.log('newsItem', this.newItems);
        }
      })
    },
    getpage (callback = false) {
      let id = this.navbars[this.currentIndex].id;
      let obj = this.newItems[this.currentIndex];
      console.log('obj.list.length', obj.list.length);
      let page = Math.ceil(obj.list.length / 5) + 1
      obj.forward = 'before';
      getPage(id, page).then(res => {
        console.log('resss', res);
        let data = res.data;
        if (data) {
          //把第二页的数据，加到第一页上去
          obj.list = [...obj.list, ...data]
          console.log('1111111', obj.list);
          // 如果页面数据小于5,代表后面没有数据了,文本就变成没有更多了
          obj.loadmore = data.length < 5 ? '没有更多…' : '加载更多…'
        }
        obj.forward = 'after';
        if (typeof callback == 'function') {
          callback()
        }
      })
    },
    scrollToLower (index) {
      //加载更多  加载中  没有更多
      let obj = this.newItems[this.currentIndex];
      if (obj.loadmore == '没有更多…') {
        return;
      } else {
        obj.loadmore = '加载中…'
        setTimeout(() => {
          this.getpage(() => {
            uni.showToast({
              title: '加载成功',
              duration: 1000
            });

          })
        }, 1000)
      }

      console.log('触底了', index);
    },
    //跳转到搜索页
    goSearch () {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    //扫码
    getScanCode () {
      uni.scanCode({
        success: (res) => {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
        },
        fail: (error) => {
          console.log('失败', error);
        },
        complete: (res) => {
          console.log('res', res);
        }
      });
    },
    //切换标题
    changeIndex (index) {
      this.currentIndex = index;
      this.scrollInto = 'tab' + index
      this.scrollLeft = this.itemWidth * index - 104 + 'rpx'
    },
    //监听swiper切换
    changeTab (e) {
      this.currentIndex = e.detail.current;
      this.scrollInto = 'tab' + e.detail.current
      this.scrollLeft = this.itemWidth * e.detail.current - 104 + 'rpx'
      if (this.newItems[this.currentIndex].forward == 'before') {
        this.getpage()
      } else {
        return;
      }
    }
  }
}
</script>

<style scoped>
.search-left,
.search-right {
  width: 44rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
}

.search-left .iconfont,
.search-right .iconfont {
  font-size: 32rpx;
}

.search-input {
  height: 60rpx;
  line-height: 60rpx;
  color: #ccc;
  font-size: 28rpx;
  text-indent: 20rpx;
  border-radius: 30rpx;
}

.navbar-wrapper {
  width: 750rpx;
  height: 88rpx;
  line-height: 100rpx;
  transform: translateY(-20rpx);
  font-size: 28rpx;
}
</style>